<template>
  <div id="app">
    <button @click="addTodo">添加</button>
    <ul id="todos">
      <transition-group tag="ul" name="todo">
        <li v-for="(todo,index) in todos" :key="todo" class="todo">
         <span>{{todo}}</span>
         <button @click="deleteTodo(index)">X</button>
        </li>
      </transition-group>
    </ul>
  </div>
</template>
<script>
import 'animate.css';
export default {
  name: "Animation",
  data: () => ({
    todos:['A','B','C']
  }),
  methods:{
    addTodo(){
      this.todos.push('D');
    },
    deleteTodo(index){
      this.todos.splice(index,1);
    }
  }
};
</script>
<style lang="less">
#app{
  text-align: left;
}
#todos{
  width:200px;
  list-style: none;
  list-style-type: none;
  padding: 0;
  li{
    background-color: lightgreen;
  }
}
li{
  transition: all 3s;
}
.todo-enter,.todo-leave-to{
  opacity: 0;
  transform: translateX(-100%);
}
.todo-leave,.todo-enter-to{
  opacity: 1;
  transform: translateX(0);
}
</style>
